<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="支付保证金"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div class="cell">
      <div>房源真实保证金</div>
      <div>￥50.00元</div>
    </div>
    <div class="cell">
      <div>房东真实保证金</div>
      <div>￥50.00元</div>
    </div>
    <div class="cell">
      <div>合计</div>
      <div>￥100.00元</div>
    </div>
    <div class="btnpart">
      <div class="tips">
        <div>房东可自主选择上下架</div>
        <div>房源下架自动退还保证金至我的现金</div>
        <div>为保障沟通效率请及时更新房源状态(上架/下架)</div>
      </div>
      <div class="pay">应付金额：<span>￥<span>100</span>.00</span></div>
      <div class="cheak">
        <van-checkbox
          shape="square"
          icon-size="11px"
          checked-color="#45b7cb"
          v-model="checked"
        ></van-checkbox>
        <span
          >我已阅读并同意<span @click="toagreement" class="xy"
            >《房东直租服务协议》</span
          ></span
        >
      </div>
      <button @click="give">去支付</button>
      <div class="safe"></div>
    </div>
    <van-overlay z-index="200" :show="show">
      <div class="wrapper">
        <div class="paysuccess">
          <van-icon size="70px" name="checked" />
          <div>
            交纳成功，<span>{{ time }}</span
            >秒后自动跳转
          </div>
          <button @click="back">跳转</button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getPay, createPayorder, paySign } from "../../apis/buy.js";
export default {
  data() {
    return {
      timer: "",
      time: 3,
      checked: false,
      radio: 1,
      show: false,
      serveId: "",
      houseId: "",
      wxChannel: null,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    toagreement() {
      this.$router.push({ path: "/rentowneragreement" });
    },
    give() {
      let _this = this;
      if (this.checked) {
        createPayorder({ serveId: this.serveId, houseId: this.houseId }).then(
          (res) => {
            // console.log(res)
            let orderid = res.result.orderId;
            paySign({ type: "1", orderId: orderid }).then((rep) => {
              plus.payment.request(
                _this.wxChannel,
                JSON.stringify(rep.result),
                function (result) {
                  console.log(result);
                  _this.show = true;
                  _this.timer = setInterval(() => {
                    _this.time--;
                    if (_this.time == 0) {
                      clearInterval(_this.timer);
                      _this.$router.go(-1);
                    }
                  }, 1000);
                },
                function () {
                  _this.$toast("支付失败");
                }
              );
            });
          }
        );
      } else {
        this.$toast("请阅读并勾选下方协议");
      }
    },
    plusReady() {
      let _this = this;
      plus.payment.getChannels((channels) => {
        for (let i in channels) {
          if (channels[i].id == "wxpay") {
            _this.wxChannel = channels[i];
          }
        }
      });
    },
  },
  created() {
    if (window.plus) {
      setTimeout(this.plusReady, 0);
    } else {
      document.addEventListener("plusready", this.plusReady, false);
    }
    this.houseId = this.$route.query.houseId;
    getPay({ cate: "1", type: "1" }).then((res) => {
      this.serveId = res.result.list[0].serveId;
    });
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.tips {
  text-align: left;
  font-size: 12px;
  color: #999;
  padding: 15px;
}
.cell {
  color: #333;
  display: flex;
  margin: 15px 0;
  padding: 5px 15px;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  div {
    &:last-child {
      font-size: 18px;
      color: #d43b33;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.paysuccess {
  padding: 25px 40px;
  background-color: #fff;
  text-align: center;
  color: #45b7cb;
  > div {
    margin-top: 10px;
    color: #333;
    span {
      color: #45b7cb;
    }
  }
  button {
    margin-top: 15px;
    background-color: #fff;
    border: 1px solid #45b7cb;
    padding: 3px 15px;
    border-radius: 15px;
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  background-color: #fff;
  text-align: center;
  .tips {
    font-size: 12px;
    > div {
      line-height: 20px;
    }
  }
  .pay {
    padding: 15px;
    text-align: right;
    font-weight: bold;
    span {
      font-size: 20px;
      color: #d43b33;
      > span {
        font-size: 30px;
      }
    }
  }
  .cheak {
    border-top: 1px solid #f1f1f1;
    padding: 5px 0;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
    font-size: 11px;
    color: #333;
    > span {
      margin-left: 3px;
    }

    .xy {
      color: #45b7cb;
    }
  }
  button:active {
    background-image: linear-gradient(to bottom right, #6fcddd79, #49b9cd76);
  }
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>